<template>
  <div class="czrz_low">
    <div class="czrz_low_1">
      <div class="czrz_low_1_1" style="margin-right: 8px">
        <my-date width="300"></my-date>
      </div>
      <div class="czrz_low_1_2" style="margin-right: 300px">
        <my-search width="266" ph="请输入操作人信息"></my-search>
      </div>
      <div class="czrz_low_1_3">
        <my-button color="none">导出当前数据</my-button>
      </div>
    </div>
    <div class="czrz_low_2">
      <base-table :mydata="CzData" :mytitle="CzTitle"></base-table>
    </div>
    <div class="czrz_low_3">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, prev, pager, next, sizes, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MyDate from "@/components/MyInput/MyDate";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
  components: {
    MyDate,
    MySearch,
    MyButton,
    BaseTable,
  },
  data() {
    return {
      CzData: [
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },

        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
        {
          czrz_name: "七尾",
          czrz_status: "新增工单",
          czrz_name1: "工单标题:客户报价",
          czrz_time: "2019/09/12 10:99",
          czrz_ip: "132.224.22.2",
        },
      ],
      CzTitle: [
        {
          name: "操作人",
          prop: "czrz_name",
          width: 150,
        },
        {
          name: "操作动作",
          prop: "czrz_status",
          width: 200,
        },
        {
          name: "操作对象",
          prop: "czrz_name1",
          width: 220,
        },
        {
          name: "操作时间",
          prop: "czrz_time",
          width: 220,
        },
        {
          name: "操作IP",
          prop: "czrz_ip",
          width: 220,
        },
      ],
    };
  },
};
</script>

<style>
.czrz_low {
  width: 1040px;
  height: 770px;
  background-color: #ffffff;
  padding-top: 2px;
}
.czrz_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 25px;
}
.czrz_low_2 {
  width: 100%;
  height: 600px;
  margin-top: 20px;
  margin-left: 10px;
}
.czrz_low_3 {
  position: relative;
  top: 35px;
  left: 340px;
}
</style>